<template>
    <div>
        <h1>房号管理</h1>
        <input type="button" value="新增房号" @click="add">
        <input type="button" value="批量下架" @click="isUse(1)">
        <input
        type="button"
        value="批量上架"
 
        @click="isUse(0)"
      />
        <input type="button" value="批量删除" @click="delAll">
        <input type="button" value="批量导入">
    <select v-model="quinfo.name">
        <option value="">全部房型</option>
        <option value="普通房">普通房</option>
        <option value="精装房">精装房</option>
    </select>
    <input type="button" value="查询" @click="show">
        <table class="table table-bordered">
            <tr>
                <td>
                    <input type="checkbox" v-model="checked" @click="checkAll" />
                </td>
                <td>房型名称</td>
                <td>房号</td>
                <td>排序</td>
                <td>备注</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in data.list" :key="item.id">
                <td>         <input
              type="checkbox"
              :value="item.id"
              v-model="ids"
              @change="checkOne"
            /></td>
                <td>{{ item.name }}</td>
                <td>{{ item.hao }}</td>
                <td>{{ item.id }}</td>
                <td>{{ item.bie }}</td>
                <td>{{ item.state }}</td>
                <td>
                    <input type="button" value="编辑" @click="upd(item.id)">
                    <input
              type="button"
              v-if="item.state == 0"
              value="下架"
           
              @click="updateState(item.Id, 1)"
            />
            <input
              type="button"
              v-if="item.state == 1"
              value="上架"
           
              @click="updateState(item.Id, 1)"
            />
                    <input type="button" value="删除" @click="shan(item.id)">
                </td>
            </tr>
        </table>
    </div>
    <span>总共{{ data.totalCount }}条</span>
    <span>总共{{ data.totaPage }}页</span>
    <span>
        当前{{ quinfo.pageindex }} / {{ data.totaPage }}
    </span>
    <input type="button" value="首页" @click="gitlist(1)">
    <input type="button" value="上一页" @click="gitlist(quinfo.pageindex-1)">
    <select v-model="quinfo.pageSize" @change="show">
        <option :value="item" v-for="item in arr" :key="item">
          每页显示{{ item }}条
        </option>
      </select>
    <input type="button" value="下一页" @click="gitlist(quinfo.pageindex+1)">
    <input type="button" value="尾页" @click="gitlist(data.totaPage)">
</template>

<script setup lang="ts">
import { ref,reactive,onMounted } from "vue";
import {useRoute,useRouter} from 'vue-router'
import axios from 'axios'
import 'bootstrap/dist/css/bootstrap-theme.css'
let route=useRoute();
let router=useRouter();
const add=()=>{
    router.push("/fangadd")
}
let checked = ref(false);
let quinfo=reactive({
      "name": "",
      "hao": 0,
      "bie": "",
      "state": 0,
      pageindex:1,
      pageSize:2
})
let data:any=reactive({
    list:[],
    totalCount:0,
    totalPage:0
})
onMounted(()=>{
    show();
})
const show=()=>{
    axios({
        url:'https://localhost:7098/api/FangHao/GetFangHaos',
        method:'get',
        params:quinfo
    })
    .then((res)=>{
        console.log(res);
        data.list=res.data.list;
        data.totalCount=res.data.totalCount;
        data.totaPage=res.data.totaPage;
    })
    .catch((err)=>{
        console.log(err);
    })
}

const upd=(id:any)=>{
    router.push({
        path: '/fanUpd', 
        query: {
      id: id,
    },
    })
  
};

let ids = ref([]);
const checkAll = () => {

if (checked.value == true) {
  checked.value = false;
} else {
  checked.value = true;
}
if (checked.value == true) {
  ids.value = data.list.map((item: any) => {
    return item.id;
  });
} else {
  ids.value = [];
}
};

const checkOne = () => {
if (ids.value.length == data.list.length) {
  checked.value = true;
} else {
  checked.value = false;
}
};
let arr = ref([2, 4, 6, 8]);

const shan=(id:any)=>{
    var f=confirm("确认要删除吗?");
    axios({
        url:'https://localhost:7098/api/FangHao/ShanFHao',
        method:'delete',
        params:
        {id:id}
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0){
            alert("删除成功!");
            show();
        }
        else{
            alert("删除失败!");
        }
    })
    .catch((err)=>{
        console.log(err);
    })

}
const isUse = (state: any) => {
  if (ids.value.length == 0) {
    alert('必选一项');
    return;
  }
  axios({
    url: 'https://localhost:7098/api/FangHao/isUseAllState',
    method: 'put',
    params: {
      ids: ids.value.toString(),
      state: state,
    },
  })
    .then((res) => {
      console.log(res);
      if (res.data > 0) {
        alert('修改成功');
        checked.value = false;
        ids.value = [];
        show();
      } else {
        alert('修改失败');
        checked.value = false;
        ids.value = [];
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

const gitlist=(num:any)=>{
    if (num < 1) {
    quinfo.pageindex = 1;
    return;
  }
  if (num > data.totapage) {
    quinfo.pageindex = data.totapage;
    return;
  }
  quinfo.pageindex = num;
  show();
}


const delAll = () => {
  if (ids.value.length == 0) {
    alert('必选一项');
    return;
  }
  var f = confirm('请问确定要删除码？');
  if (f) {
    axios({
      url: 'https://localhost:7098/api/FangHao/DelAllFHao',
      method: 'delete',
      params: {
        ids: ids.value.toString(),
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data > 0) {
          alert('删除成功');
          checked.value = false;
          show();
        } else {
          alert('删除失败');
          checked.value = false;
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};
const updateState = (id: any, state: any) => {
  axios({
    url: 'https://localhost:7098/api/FangHao/isUseAllState',
    method: 'put',
    params: {
      id: id,
      state: state,
    },
  })
    .then((res) => {
      console.log(res);
      if (res.data > 0) {
        alert('修改成功');
        show();
      } else {
        alert('修改失败');
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

</script>

<style scoped>

</style>